<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/pev2/dist/style.css" />
  <style>
    .splitpanes__splitter,
    .diagram .plan-diagram,
    .align-items-center,
    .plan-stats,
    .plan-diagram,
    .splitpanes>.splitpanes__pane:first-child {
      display: none !important;
    }

    .splitpanes>.splitpanes__pane:last-child {
      height: 50vh;
      width: 100% !important;
    }

    #app {
      position: relative;
    }

    .tools {
      position: absolute;
      z-index: 19899;
      bottom: 10px;
      left: 45%;
    }

    .title {
      position: absolute;
      z-index: 19899;
      bottom: 10px;
      left: 45%;
    }
  </style>
</head>

<body>

  <div id="app1">
    <!-- 加个key，就可以了 -->
    <pev2 :plan-source="plan" plan-query="query" :key="index" />
  </div>

  <div id="app2">
    <pev2 :plan-source="plan" plan-query="query" />
  </div>

  <br><br>
  <div class="tools">
    <button id="next" style="background: #3CB371;color:white;
	            width: 130px;
	            height: 30px;
	            border:0;
	            font-size: 16px;
	            box-sizing: content-box;
                border-radius: 5px;">Next SQL
    </button>
    <br><br>
    <button id="pre" style="background: #3CB371;color:white;
	            width: 130px;
	            height: 30px;
	            border:0;
	            font-size: 16px;
	            box-sizing: content-box;
                border-radius: 5px;">Previous SQL
    </button>
  </div>
  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script>
  <script>
    const { createApp } = Vue
    const app1 = createApp({
      data() {
        return {
          // TODO: 这个index 就是为了让他可以更新的
          index: 1,
          // 这个就应该是后端给你的数据,你看官网的文档plan和query都是干什么的
          plan: "Seq Scan on foo  (cost=0.00..155.00 rows=10000 width=4)",
          query: ``,
        }
      },
      methods: {
        // 在这个事件函数里可以做你要处理的逻辑
        next() {
          this.plan = `
                                                           QUERY PLAN
---------------------------------------------------------------------------------------------------------------------------------
 Nested Loop  (cost=4.33..118.25 rows=10 width=488) (actual time=0.370..1.126 rows=10 loops=1)
   ->  Bitmap Heap Scan on tenk1 t1  (cost=4.33..39.44 rows=10 width=244) (actual time=0.254..0.380 rows=10 loops=1)
         Recheck Cond: (unique1 < 10)
         ->  Bitmap Index Scan on tenk1_unique1  (cost=0.00..4.33 rows=10 width=0) (actual time=0.164..0.164 rows=10 loops=1)
               Index Cond: (unique1 < 10)
   ->  Index Scan using tenk2_unique2 on tenk2 t2  (cost=0.00..7.87 rows=1 width=244) (actual time=0.041..0.048 rows=1 loops=10)
         Index Cond: (unique2 = t1.unique2)
 Total runtime: 2.414 ms`
          this.query = `
SELECT *
FROM tenk1 t1, tenk2 t2
WHERE t1.unique1 < 10 AND t1.unique2 = t2.unique2;`
          //  TODO: 这个index 就是为了让他可以更新的
          this.index++
          /* window.fetch('url/xx').then(res => res.json()).then(res => {
            // res 就是数据
            // vue赋值处理，一旦赋值，页面会自动呈现的
            this.plan = res.xx
            this.query = res.query
          }) */
        },
        pre() {
          alert(2)
          /* window.fetch('url/xx').then(res => res.json()).then(res => {
            // res 就是数据
            // vue赋值处理，一旦赋值，页面会自动呈现的
            this.plan = res.xx
            this.query = res.query
          }) */
        }
      },
      mounted() {
        console.log('页面打开后自动发起请求')
        // ajax请求，假设这里你和后端不存在跨域，可以直接使用浏览器自带的请求来做就好了
        /* window.fetch('url/xx').then(res => res.json()).then(res => {
          // res 就是数据
          // vue赋值处理，一旦赋值，页面会自动呈现的
          this.plan = res.xx
          this.query = res.query
        }) */
      }
    })
    app1.component("pev2", pev2.Plan)
    var ap1 = app1.mount("#app1")

    const app2 = createApp({
      data() {
        return {
          // 这个就应该是后端给你的数据,你看官网的文档plan和query都是干什么的
          plan: "Seq Scan on foo  (cost=0.00..155.00 rows=10000 width=4)",
          query: ""
        }
      },
      methods: {
        // 在这个事件函数里可以做你要处理的逻辑
        next() {

          /*  window.fetch('url/xx').then(res => res.json()).then(res => {
             // res 就是数据
             // vue赋值处理，一旦赋值，页面会自动呈现的
             this.plan = res.xx
             this.query = res.query
           }) */

        },
        pre() {

          /* window.fetch('url/xx').then(res => res.json()).then(res => {
            // res 就是数据
            // vue赋值处理，一旦赋值，页面会自动呈现的
            this.plan = res.xx
            this.query = res.query
          }) */

        }
      },
      mounted() {
        console.log('页面打开后自动发起请求')
        // ajax请求，假设这里你和后端不存在跨域，可以直接使用浏览器自带的请求来做就好了

        /* window.fetch('url/xx').then(res => res.json()).then(res => {
          // res 就是数据
          // vue赋值处理，一旦赋值，页面会自动呈现的
          this.plan = res.xx
          this.query = res.query
        }) */

      }
    })
    app2.component("pev2", pev2.Plan)
    var ap2 = app2.mount("#app2")

    // 按钮的事件
    document.getElementById('next').addEventListener('click', function () {
      ap2.next()
      ap1.next()
    })
    document.getElementById('pre').addEventListener('click', function () {
      ap2.pre()
      ap1.pre()
    })
  </script>
</body>

</html>